<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body {
            background-color: #000;
        } */

        .myChart {
            width: 1000px;
            height: 600px;
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            /* border: 1px solid #f00; */
        }
    </style>
</head>

<body>
    <div class="myChart"></div>
</body>
<script src="./echarts.min.js"></script>
<script src="./theme/dark.js"></script>
<script>
    // 1. 获取dom元素
    const myChartDom = document.querySelector('.myChart')

    // 2. 将myChartDom初始化为一个Echart对象
    // const myChart = echarts.init(myChartDom)   

    //  一般第二个值是设置的主题名称    默认的给出的是两种，一种是亮的，一种是dark，暗的
    // const myChart = echarts.init(myChartDom,'dark')

    //  echarts渲染引擎设置 通过给init添加第三个参数来实现     他的渲染模式变成svg
    const myChart = echarts.init(myChartDom, 'dark', { renderer: 'svg' })

    // 3. 配置图表对象
    const config = {
        // 标题组件
        title: {
            text: '饼形',
            subtext: ''
        },

        // 提示组件
        toolbar: {
            color: '#ccc'
        },

        xAxis: {
            data: ['1', '2', '3', '4', '5']
        },

        yAxis: {
            min: 0,  //最小刻度
            max: 30000  //最大 刻度
        },

        series: [
            {
                // 饼图是不依赖X轴，Y轴，是要自己设置
                type: 'pie',
                // radius:['20%','50%'],   // 这个是圆心与外圈的圆，第一个值为0就是没有中心圆
                // center:['70%','50%'],   // 位置，第一个值是距左的距离，第二个是距顶的距离
                data: [
                    {
                        name: '第一项',
                        value: 200
                    },
                    {
                        name: '第二项',
                        value: 400
                    },
                    {
                        name: '第三项',
                        value: 500
                    },
                    {
                        name: '第四项',
                        value: 800
                    }, {
                        name: '第五项',
                        value: 1000
                    }
                ]
            }
        ]
    }

    myChart.setOption(config)


</script>

</html>